<template>
  <van-steps direction="vertical" :active="-1" class="addr-list">
    <van-step v-for="(item, idx) of arr" :key="idx">
      <div class="addr-item">
        <div class="left">
          <a-input
            v-model="item.text"
            style="background: none"
            placeholder="输入地址"
            @change="change"
          ></a-input>
        </div>
        <div class="right" @click="handleDel(idx)">删除</div>
      </div>
    </van-step>
  </van-steps>

  <van-steps
    v-if="arr.length < 5"
    direction="vertical"
    :active="-1"
    class="addr-list"
    inactive-icon="plus"
  >
    <van-step>
      <div class="addr-item" @click="handleAdd">添加途经点</div>
    </van-step>
  </van-steps>
</template>

<script lang="ts" setup>
  import {
    ref,
    withDefaults,
    defineEmits,
    defineProps,
    watch,
    onMounted,
  } from 'vue';

  interface Props {
    list: any[];
  }
  const props = withDefaults(defineProps<Props>(), {
    list() {
      return [];
    },
  });
  const emit = defineEmits(['change']);
  const arr = ref<any[]>([]);
  watch(
    () => props.list,
    (newVal) => {
      arr.value = newVal;
    },
    {
      immediate: true,
    }
  );

  const handleAdd = () => {
    arr.value.push({
      text: '',
      lng: null,
      lat: null,
    });
    change();
  };

  const handleDel = (idx) => {
    arr.value.splice(idx, 1);
    change();
  };

  const change = () => {
    emit('change', arr.value);
  };

  onMounted(() => {
    setTimeout(() => {
      const list = [
        {
          text: '中物院科研保障中心',
        },
        {
          text: '',
        },
      ];
      arr.value.push(...list);
      change();
    }, 300);
  });
</script>

<style lang="less" scoped>
  .addr-list {
    .addr-item {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        width: 100%;
        flex-shrink: 1;
      }
      .right {
        margin-left: 24px;
        color: blue;
        font-size: 12px;
        flex-shrink: 0;
      }
    }
  }
</style>
